<template>
    <div id="addTrends">
        <head-tip title='音乐库' :isback=true>
            <!-- <div class="head-right">
                <span @click="ishowmusic=true" class="link icon-only" style="font-size: 1rem; margin-right: 10px;color: #fff;">自定义添加</span>
            </div> -->
        </head-tip>
        <section class="card-music">
            <!-- <div class="searchAble">
                <el-input v-model="inputval" placeholder="请输入歌曲名"></el-input>
                <el-button type="primary" @click="toSearch">查询</el-button>
            </div> -->
            <ul>
                <li style="text-align:center;">以下歌曲来自QQ音乐</li>
                <li v-for="(item,key) in dataList" :key="key" class="li-music" @click="playmusic(item.id,item.curl,item.isMy,item.cname,item.csinger)" :class="{'li-music-active':item.id==choosemusic.id}">
                    <div class="site">
                        <span class="site-li-name">{{item.cname}}</span>
                        <span class="site-li-cmemo">{{item.csinger}}</span>
                        <img class="musicbj" :src="item.cimg">
                    </div>
                </li>
            </ul>
            <audio class="playmusic" id="playmusic" :src="choosemusic.curl"></audio>
            <div style="clear:both"></div>
            <div @click="sureMusic" class="musicOk">确定</div>
        </section>
        <!--添加音乐-->
       
    </div>
</template>

<script>

import headTip from '@/components/common/head'
import myCheck from '@/components/common/checklist'
export default {
    data(){
        return {
            inputval:'',
            content:'',
            dataList:[],
            choosemusic:'',
            ishowmusic:false,
            selfmusic:{
                cname:'',
                csinger:'',
                curl:''
            }
        }
    },
    methods:{
        toSearch(){
          
        },
        playmusic(id,url,isMy,cname,csinger){
           this.choosemusic={id:id,curl:url,isMy:isMy,cname:cname,csinger:csinger}
           var musicDom=document.querySelector('#playmusic')
           setTimeout(function(){
               musicDom.play()
           },1000)
        },
        sureMusic(){
            if(this.choosemusic.isMy){
                delete this.choosemusic.id;
                delete this.choosemusic.isMy;
                var cardid=this.$route.query.id
                var _this=this
                var formData=new FormData();
                // console.log(this.choosemusic)
                for (let i in this.choosemusic){
                    // console.log(this.choosemusic[i])
                    formData.append(i,this.choosemusic[i])
                }
                formData.append('icardid',cardid)
                this.$axios.post(this.httpurl('media/uploadAudioByCardId'),formData)
                .then(response=>{
                    var data=response.data
                    if(data.result==1){
                        _this.ishowmusic=false
                        self.$message({
                            duration: 2000,
                            message: '设置音乐成功',
                            type: 'success'
                        })
                        setTimeout(function(){
                            _this.$router.back(-1)
                        },1500)
                    }else{
                        _this.ishowmusic=false
                        alert(decodeURIComponent(data.msg))
                    }
                })
            }else{
                var _this=this
                var cardid=this.$route.query.id
                var formData=new FormData();
                formData.append('ilibid',this.choosemusic.id)
                formData.append('icardid',cardid)
                this.$axios.post(this.httpurl('media/uploadAudioByCardId'),formData)
                .then(response=>{
                    var data=response.data
                    if(data.result==1){
                        _this.$message({
                            duration: 2000,
                            message: '设置音乐成功',
                            type: 'success'
                        })
                        setTimeout(function(){
                            _this.$router.back(-1)
                        },1000)
                    }else{
                        alert(decodeURIComponent(data.msg))
                    }
                })
            }
            
        },
        getData(curData){
            var _this=this
            var endData=[]
            curData.forEach(function(v,k){
                if(v.curl){
                     v.curl=v.curl.indexOf('http:')==-1 ? _this.catchurl(v.curl) : v.curl
                     endData.push(v)
                }
            })
            _this.dataList=endData
        },
    },  
    components:{
        headTip,
        myCheck
    },
    created(){
//      this.$store.commit('changeTrendshowit',{val:false})
    },
    mounted(){
        this.$axios.get(this.httpurl('medialib/listMediaLib'),{params:{itype:1,bfalg:0,pageSize:100}})
        .then(response=>{
            var data=response.data
            if(data.result==1){
               var curData=data.data.list
            //    console.log(curData)
               this.getData(curData)
            }
        })
    }
}
</script>

<style scoped>
.musicbj{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.searchAble{
    display:flex;
    padding:1rem;
}
.card-music{box-sizing: border-box;padding:50px 0 4rem;}
.li-music {
    float: left;
    width: 30%;
    background: rgba(0, 0, 0, 0.5);
    margin-left: 2.5%;
    position: relative;
    overflow: hidden;
    list-style: none;
    text-align: center;
    position: relative;
    margin-top: 1rem;
    padding: 2.4rem 0px;
    height:3rem;
    color:#fff;
}
.li-music-active{
    background-color: rgba(0, 170, 118, 0.5) !important;
    color: #fff;
}
.musicOk {
    display: block;
    width: 100%;
    height: 2.8rem;
    font-size: 1.2rem;
    color: #fff;
    background: -moz-linear-gradient(top, #00AA76 0%, #1ACCAC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00AA76), color-stop(100%,#1ACCAC));
    background: -webkit-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -o-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -ms-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: linear-gradient(to right, #00AA76 0%,#1ACCAC 100%);
    text-align: center;
    line-height: 2.8rem;
    clear: both;
    margin-top: 2rem;
    text-align: center;
    position: fixed;
    bottom: 0;
}
.li-music span.site-li-name {
    font-size: .8rem;
    display: block;
}
.li-music span.site-li-cmemo {
    font-size: .5rem;
    display: block;
    padding-top: .3rem;
}
.site-li-address {
    display: block;
    position: absolute;
    bottom: 2px;
    right: 5px;
    letter-spacing: -0.5px;
    font-size: 12px;
    margin: 0;
}
.music-popup{
    width: 100%;
    height: 60vh;
    background: rgb(255, 255, 255);
    box-sizing: border-box;
    display: block;
}
.zdyMain {
    display: block;
    width: 100%;
    position: absolute;
    top: 0.5rem;
}
.zdy-one {
    width: 100%;
    height: 2.8rem;
    background: #eee;
    line-height: 2.8rem;
}
.zdy-one label {
    display: block;
    width: 25%;
    float: left;
    text-align: center;
    color: #666;
}
.zdy-one span {
    display: block;
    width: 75%;
    float: left;
}
.zdy-one span input.input-text {
    display: block;
    width: 90%;
    height: 2.4rem;
    border: 0;
    background: none;
}
.zdyOk {
    display: block;
    position: absolute;
    width: 100%;
    height: 2.6rem;
    background: #666;
    bottom: 0;
    text-align: center;
    line-height: 2.6rem;
    color: #fff;
}
</style>
